<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>动态太极图_妖怪</title>
  <style>
    body {

      background-color: black;
    }

    div {
      position: absolute;
      top: 195px;
      left: 800px;
      width: 420px;
      height: 420px;

      transform: rotate(0deg);
    }
  </style>
</head>
<body>
<canvas height="620" id="cvs2" width="620"></canvas>
<div>
  <canvas height="420" id="cvs1" width="420"></canvas>
</div>
<script>
  let jd = 0, tm = 0
  let div = document.querySelector("div")
  window.onload = function () {
    let cs1 = document.querySelector("#cvs1")
    let cs2 = document.querySelector("#cvs2")
    let cs = cs2.getContext("2d")
    tj(cs)
    dynamic(cs1, cs2)
    rt()
  }
//动态太极之绘图,本想利用修改变量的方法绘制,但计算让人头大
  function dynamic(cs1, cs2) {
    let dym = cs1.getContext("2d")
    dym.drawImage(cs2, 190, 190, 466, 466, 0, 0, 466, 466)
  }
//动态太极之旋转,这里面有些问题
  function rt() {
    div.style.transform = `rotate(${jd}deg)`
    //clearTimeout(tm)
    jd > 360 ? jd = 0 : jd += 0.5
    //tm=setTimeout(rt,200) //这个卡顿,不流畅
    //setInterval(rt,1000) //这个越转越快,改不回来...
    requestAnimationFrame(rt)
  }
  //以下为上个作业的太极图绘制
  function tj(cs) {
    cs.strokeStyle = "rgba(255,255,255,0.8)"
    cs.fillStyle = "#000"
    cs.lineWidth = 3
    cs.globalAlpha = 0.9
    cs.beginPath()
    cs.moveTo(600, 400);
    cs.arc(400, 400, 200, 0, Math.PI, true);
    bs(cs)
    over(1, cs)
    cs.fillStyle = "#f5fffa"
    cs.beginPath()
    cs.arc(400, 400, 200, 0, Math.PI, false);
    bs(cs)
    over(1, cs)
    cs.lineWidth = 0.5
    cs.beginPath()
    moveTo(500, 400)
    cs.arc(500, 440, 20, 0, 2 * Math.PI, false);
    over(2, cs)
    cs.beginPath()
    cs.fillStyle = "#000"
    moveTo(300, 400)
    cs.arc(300, 360, 20, 0, 2 * Math.PI, false);
    over(2, cs)


    cs.font = "20px '微软雅黑'"
    cs.fillStyle = "#fff"
    cs.fillText("这是原来的太极", 320, 150)
  }

  function bs(cs) {
    cs.bezierCurveTo(210, 240, 410, 240, 400, 400)
    cs.bezierCurveTo(390, 580, 590, 580, 600, 400)
  }

  function over(a, cs) {
    if (a === 1) {
      cs.closePath()
      cs.fill()
      cs.stroke();
    } else {
      cs.closePath()
      cs.fill()
    }
  }

</script>
</body>
</html>
